<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Picker with Submit Button</title>
<style>
  .emoji {
    font-size: 24px;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Emoji Picker</h2>

<div id="emojiContainer">
  <!-- Emoji will be displayed here -->
</div>

<form id="emojiForm" action="/submit" method="POST">
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
  <input type="hidden" id="selectedEmoji" name="selectedEmoji">
  <button type="submit">Submit</button>
</form>

<script>
  const emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚", "😋", "😛", "😜", "😝", "🤑", "🤗", "🤩", "🤔", "🤨", "😐", "😑", "😶", "🙄", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩", "😤", "😠", "😡", "🤬", "😈", "👿", "💀", "☠️", "💩", "🤡", "👹", "👺", "👻", "👽", "👾", "🤖", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾"];

  const emojiContainer = document.getElementById("emojiContainer");

  emojis.forEach(emoji => {
    const emojiSpan = document.createElement("span");
    emojiSpan.textContent = emoji;
    emojiSpan.classList.add("emoji");
    emojiSpan.addEventListener("click", () => {
      insertEmoji(emoji);
    });
    emojiContainer.appendChild(emojiSpan);
  });

  function insertEmoji(emoji) {
    const selectedEmojiInput = document.getElementById("selectedEmoji");
    const messageInput = document.getElementById("message");
    const cursorPosition = messageInput.selectionStart;
    const textBeforeCursor = messageInput.value.substring(0, cursorPosition);
    const textAfterCursor = messageInput.value.substring(cursorPosition);
    messageInput.value = textBeforeCursor + emoji + textAfterCursor;
    selectedEmojiInput.value = emoji;
  }
</script>

</body>
</html>